/**
 * 传入歌词字符串解析为数组
 */
function parseLrc(lrc: string): SongInfo[] {
    const result: SongInfo[] = [] // 存放歌词信息的数组

    lrc.split('\n').forEach((value) => {
        const [timeStr, word] = value.split(']')
        const time = parseTime(timeStr.substring(1))
        const obj: SongInfo = { time, word }
        result.push(obj)
    })

    return result
}

/**
 * 传入字符串时间 解析为 所花费的秒数
 * @param string 02:36.400
 * @returns 
 */
function parseTime(timeStr: string): number {
    return +timeStr.split(':')[0] * 60 + (+timeStr.split(':')[1])
}

/**
 * 计算出，在当前播放器播放到第几秒的情况下
 * lrcData数组，应该高亮显示的歌词下标
 */
function findIndex(): number {
    const curTime = doms.audio?.currentTime

    let index = 0
    lrcData.forEach((value, idx) => {
        if (curTime! > value.time) {
            index = idx - 1
        }
    })
    return index
}

/**
 * 创建 歌词元素 li
 */
function createLrcElements() {
    const frag = document.createDocumentFragment()
    lrcData.forEach((value) => {
        if (value.word) {
            const li = document.createElement('li')
            li.textContent = value.word
            frag.appendChild(li)
        }
    })
    doms.ul?.appendChild(frag)
}

/**
 * 设置 ul元素 的偏移量
 */
function setOffset() {
    const index = findIndex()
    let offset = (liHeight! * index) + liHeight! / 2 - containerHeight! / 2
    console.log(offset)
    if (offset < 0) {
        offset = 0
    }

    if (offset > maxHeight) {
        offset = maxHeight
    }

    doms.ul!.style.transform = `translateY(-${offset}px)`

    // 移除之前的 active
    if (doms.ul?.querySelector('.active')) {
        doms.ul?.querySelector('.active')?.classList.remove('active')
    }
    doms.ul!.children[index].classList.add('active')
}
const doms = {
    audio: document.querySelector('audio'),
    ul: document.querySelector('ul'),
    container: document.querySelector('.container')
}
const lrcData = parseLrc(lrc)

createLrcElements()

// 容器高度
const containerHeight = doms.container?.clientHeight
// 最大高度
const maxHeight = doms.ul?.clientHeight! - containerHeight!

// ul下的 子元素 li高度
const liHeight = doms.ul?.children[0].clientHeight

console.log( doms.ul?.clientHeight)

doms.audio?.addEventListener('timeupdate', setOffset)

setOffset()